<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="box">
    <li></li>
  </ul>
  <script>
    //1. 创建对象----打开浏览器
    var xhr = null;
    try {
      xhr = new XMLHttpRequest();
    } catch (e) {
      xhr = new ActiveXObject("microsoft.XML");  //低版本ie使用的ajax对象
    }
    //2. 调用ajax对象open方法       ----输入网址
    // xhr.open("请求方式", "请求地址", "是否异步")
    // 1).请求方式  get  post
    // get 地址栏传参  数据量小  10kb左右  地址栏可见参数  安全性低   主要负责获取数据
    // post  浏览器内部传参  数据量大  地址栏不可见参数  安全性高     主要负责发送数据
    // 2) 请求地址
    //  http://127.0.0.1:3000/VueHandler/AdminLoginAndRegHandler?action=login 
    // 3).是否异步
    // true 异步   不会阻塞代码 代码同时执行
    // false 同步  会阻塞代码  代码按顺序执行
    xhr.open("get", "./a.json", true)

    // 3.调用ajax的send方法   ------按下回车
    xhr.send()

    // 4.等待返回数据                      -----返回网页
    // 用xhr对象的 onreadystatechange  事件监控数据返回
    xhr.onreadystatechange = function () {

      // xhr.readyState  请求状态  0-4     4 数据返回成功
      // 0：请求未初始化，还没有调用 open() 。
      // 1：请求已经建立，但是还没有发送，还没有调用 send() 。
      // 2：请求已发送，正在处理中。
      // 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
      // 4：响应已完成；您可以获取并使用服务器的响应了。
      // xhr.status     服务器状态          200 成功    
      // 1** 请求正在初始化

      // 2 ** 开头 （请求成功）表示成功处理了请求的状态代码。
      // 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
      // 201 （已创建） 请求成功并且服务器创建了新的资源。
      // 202 （已接受） 服务器已接受请求，但尚未处理。
      // 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
      // 204 （无内容） 服务器成功处理了请求，但没有返回任何内容。

      // 3** 开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
      // 300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者(user agent) 选择一项操作，或提供操作列表供请求者选择。
      // 301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
      // 302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
      // 304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
      // 305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。


      // 4 ** 开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
      // 400 （错误请求） 服务器不理解请求的语法。
      // 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
      // 403 （禁止） 服务器拒绝请求。
      // 404 （未找到） 服务器找不到请求的网页。
      // 405 （方法禁用） 禁用请求中指定的方法。
      // 406 （不接受） 无法使用请求的内容特性响应请求的网页。
      // 408 （请求超时） 服务器等候请求时发生超时。
      // 409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
      // 410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
      // 
      // 5 ** 开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
      // 500 （服务器内部错误） 服务器遇到错误，无法完成请求。
      // 501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
      // 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
      // 503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。


      if (xhr.readyState == 4 && xhr.status == 200) {
        // xhr.responseXML 后端返回的xml数据格式
        // xhr.responseText   后端返回的文本类型数据
        console.log(xhr.responseText)
        console.log(JSON.parse(xhr.responseText))
        var data = JSON.parse(xhr.responseText).data;
        loadList(data)
      }
    }



    // 渲染页面
    function loadList(data) {
      var uls = document.querySelector("#box");
      var str = ``;
      for (var i = 0; i < data.length; i++) {
        str += `<li>${data[i]}</li>`
      }
      uls.innerHTML = str;
    }



















  </script>
</body>

</html>